﻿<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="UTF-8">  
    <title>韭研公社日历</title>  
    <style>  
        body {  
            font-family: system-ui, -apple-system, sans-serif;  
            margin: 0;  
            padding: 0px;  
            background: #1a1a1a;  
            color: #fff;  
        }  

        .header {  
            position: sticky;  
            top: 0;  
            background: #1a1a1a;  
            padding: 10px 0;  
            margin-bottom: 20px;  
            z-index: 100;  
        }  

        .search-bar {  
            display: flex;  
            gap: 10px;  
            align-items: center;  
            margin-bottom: 10px;  
        }  

        .search-input {  
            flex: 1;  
            background: #2d2d2d;  
            border: none;  
            border-radius: 4px;  
            padding: 8px 12px;  
            color: #fff;  
            font-size: 14px;  
        }  

        .search-input::placeholder {  
            color: #808080;  
        }  

        .filter-btn {  
            background: #2d2d2d;  
            border: none;  
            border-radius: 4px;  
            padding: 6px 8px;  
            color: #808080;  
            cursor: pointer;  
            display: flex;  
            align-items: center;  
            gap: 4px;  
            font-size: 14px;  
        }  

        .filter-btn.active {  
            color: #EE00EE;  
        }  

        .timeline {  
            position: relative;  
            padding-left: 50px;  
        }  

        .timeline::before {  
            content: '';  
            position: absolute;  
            left: 15px;  
            top: 0;  
            bottom: 0;  
            width: 2px;  
            background: #333;  
        }  

        .date-group {  
            margin-bottom: 30px;  
            position: relative;  
            scroll-margin-top: 80px;  
        }  

        .date-header {  
            font-size: 14px;  
            color: #00ffff;  
            margin-bottom: 10px;  
            position: relative;  
        }  

        .date-header::before {  
            content: '';  
            position: absolute;  
            left: -43px;  
            top: 50%;  
            width: 10px;  
            height: 10px;  
            background: #3a9eff;  
            border-radius: 50%;  
            transform: translateY(-50%);  
        }  

        .event {  
            background: #2d2d2d;  
            padding: 12px 15px;  
            margin-bottom: 10px;  
            border-radius: 6px;  
        }  

        .event-title {  
            color: #FF3030;  
            font-size: 14px;  
            margin-bottom: 6px;  
            line-height: 1.4;  
        }  

        .event-title.important {  
            font-weight: bold;  
            color: #EE00EE;  
        }  

        .event-content {  
            color: #BEC4CD;  
            font-size: 13px;  
            line-height: 1.4;  
            margin-bottom: 8px;  
        }  

        .event-tags {  
            display: flex;  
            flex-wrap: wrap;  
            gap: 6px;  
        }  

        .tag {  
            background: #e61919;  
            color: #fff;  
            padding: 2px 8px;  
            border-radius: 4px;  
            font-size: 12px;  
            cursor: pointer;  
        }  

        .tag:hover {  
            background: #000;  
        }  

        .loading {  
            color: #808080;  
            text-align: center;  
            padding: 20px;  
        }  

        .today {  
            background: #470024;  
            border-radius: 6px;  
            padding: 10px;  
        }  

        .today .event {  
            background: rgba(45, 45, 45, 0.8);  
        }  

        .today .time {  
            background: #ff0000;  
        }  

        .hidden {  
            display: none;  
        }  
         
        body::-webkit-scrollbar {  
            width: 0px;  
        }  
        
        .date-selector {  
            display: flex;  
            justify-content: space-between;  
            align-items: center;  
            margin-bottom: 10px;  
            background: #2d2d2d;  
            padding: 8px 12px;  
            border-radius: 4px;  
        }  

        .month-navigation {  
            display: flex;  
            align-items: center;  
            position: relative;  
            margin: 0 auto;  
        }  

        .month-display {  
            color: #00ffff;  
            font-size: 14px;  
            padding: 0;  
            text-align: center;  
            width: 80px;  
        }  

        .month-arrow {  
            background: transparent;  
            border: none;  
            color: #00ffff;  
            font-size: 16px;  
            cursor: pointer;  
            padding: 0;  
            display: flex;  
            align-items: center;  
            justify-content: center;  
            position: relative;  
            width: 20px;  
            height: 20px;  
        }  
        
        .month-arrow:hover {  
            color: #EE00EE;  
        }  
        
        .today-btn {  
            background: #470024;  
            border: none;  
            margin-left: auto;    
            border-radius: 4px;  
            padding: 4px 8px;  
            color: #EE00EE;  
            cursor: pointer;  
            font-size: 12px;  
        }  
    </style>  
</head>  
<body>  
    <div class="header">  
        <div class="date-selector">  
            <button class="month-arrow" id="prevMonth">←</button>  
            <div class="month-display" id="monthDisplay">2025-00月</div>  
            <button class="month-arrow" id="nextMonth">→</button>  
            <button class="today-btn" id="todayBtn">返回今日</button>  
        </div>  
        <div class="search-bar">  
            <input type="text" class="search-input" placeholder="搜索事件/行业/题材" id="searchInput">  
            <button class="filter-btn" id="filterBtn">  
                <span style="font-weight: bold;color:#EE00EE;">重磅</span>  
            </button>  
        </div>  
    </div>  
    
    <div id="timeline" class="timeline">  
        <div class="loading">加载中...</div>  
    </div>  

    <script>  
        let currentData = [];  
        let showImportantOnly = false;  
        let currentYearMonth = '';  

        function initializeMonthNavigation() {  
            const today = new Date();  
            const year = today.getFullYear();  
            const month = today.getMonth() + 1;  
            
            currentYearMonth = `${year}-${String(month).padStart(2, '0')}`;  
            updateMonthDisplay(currentYearMonth);  
            
            document.getElementById('prevMonth').addEventListener('click', () => {  
                navigateMonth(-1);  
            });  
            
            document.getElementById('nextMonth').addEventListener('click', () => {  
                navigateMonth(1);  
            });  
        }  
        
        function updateMonthDisplay(yearMonth) {  
            const [year, month] = yearMonth.split('-');  
            document.getElementById('monthDisplay').textContent = `${year}-${month}月`;  
        }  
        
        function navigateMonth(direction) {  
            const [year, month] = currentYearMonth.split('-').map(num => parseInt(num, 10));  
            
            let newMonth = month + direction;  
            let newYear = year;  
            
            if (newMonth > 12) {  
                newMonth = 1;  
                newYear += 1;  
            } else if (newMonth < 1) {  
                newMonth = 12;  
                newYear -= 1;  
            }  
            
            currentYearMonth = `${newYear}-${String(newMonth).padStart(2, '0')}`;  
            updateMonthDisplay(currentYearMonth);  
            
            fetchEvents(currentYearMonth);  
        }  

        async function fetchEvents(yearMonth) {  
            const timestamp = Date.now().toString();  
            document.getElementById('timeline').innerHTML = '<div class="loading">加载中...</div>';  
            
            try {  
                const response = await fetch('https://app.jiuyangongshe.com/jystock-app/api/v1/timeline/list', {  
                    method: 'POST',  
                    headers: {  
                        'Content-Type': 'application/json',  
                        'timestamp': timestamp,  
                        'Origin': 'file://',  
                        'platform': '3',  
                        'User-Agent': 'Mozilla/5.0',  
                        'token': '0',  
                        'Accept': '*/*',  
                        'Sec-Fetch-Site': 'cross-site',  
                        'Sec-Fetch-Mode': 'cors',  
                        'Sec-Fetch-Dest': 'empty',  
                        'Accept-Encoding': 'gzip, deflate, br',  
                        'Accept-Language': 'zh-CN,zh;q=0.9'  
                    },  
                    body: JSON.stringify({  
                        grade: 0,  
                        keyword: "",  
                        theme_id: "",  
                        date: yearMonth || getCurrentYearMonth()  
                    })  
                });  

                const data = await response.json();  
                
                if (data && data.data) {  
                    currentData = data.data;  
                    renderTimeline(currentData);  
                    if (yearMonth === getCurrentYearMonth()) {  
                        scrollToNearestDate();  
                    }  
                } else {  
                    throw new Error('Invalid data structure');  
                }  
                
            } catch (error) {  
                console.error('获取失败:', error);  
                document.getElementById('timeline').innerHTML = '<div style="color: red">加载失败: ' + error.message + '</div>';  
            }  
        }  

        function getCurrentYearMonth() {  
            const today = new Date();  
            const year = today.getFullYear();  
            const month = String(today.getMonth() + 1).padStart(2, '0');  
            return `${year}-${month}`;  
        }  

        function formatDate(date) {  
            const year = date.getFullYear();  
            const month = String(date.getMonth() + 1).padStart(2, '0');  
            const day = String(date.getDate()).padStart(2, '0');  
            return `${year}-${month}-${day}`;  
        }  

        function scrollToNearestDate() {  
            const today = new Date();  
            const todayStr = formatDate(today);  
            
            const dateGroups = document.querySelectorAll('.date-group');  
            if (!dateGroups.length) return;  

            const todayElement = document.getElementById(`date-${todayStr}`);  
            if (todayElement) {  
                todayElement.scrollIntoView({ behavior: 'smooth', block: 'start' });  
                return;  
            }  
        
            let nearestDate = null;  
            let minDiff = Infinity;  
            
            dateGroups.forEach(group => {  
                const dateStr = group.id.replace('date-', '');  
                const date = new Date(dateStr);  
                const timeDiff = Math.abs(date.getTime() - today.getTime());  
                
                if (timeDiff < minDiff) {  
                    minDiff = timeDiff;  
                    nearestDate = dateStr;  
                }  
            });  
            
            if (nearestDate) {  
                const nearestElement = document.getElementById(`date-${nearestDate}`);  
                if (nearestElement) {  
                    nearestElement.scrollIntoView({ behavior: 'smooth', block: 'start' });  
                }  
            }  
        }  

        function filterEvents(events, searchText, importantOnly) {  
            return events.filter(event => {  
                const matchesSearch = !searchText ||   
                    event.title.toLowerCase().includes(searchText.toLowerCase()) ||  
                    (event.content && event.content.toLowerCase().includes(searchText.toLowerCase())) ||  
                    event.timeline.theme_list.some(theme =>   
                        theme.name.toLowerCase().includes(searchText.toLowerCase())  
                    );  
                
                const matchesImportant = !importantOnly || event.timeline.grade <= 5;  
                
                return matchesSearch && matchesImportant;  
            });  
        }  

        function renderTimeline(timelineData) {  
            const today = formatDate(new Date());  
            
            const sortedData = [...timelineData].sort((a, b) => {  
                return new Date(b.date) - new Date(a.date);  
            });  
            
            const timelineHtml = sortedData.map(dateGroup => {  
                const sortedEvents = [...dateGroup.list].sort((a, b) => {  
                    return new Date(b.timeline.create_time) - new Date(a.timeline.create_time);  
                });  

                const filteredEvents = filterEvents(  
                    sortedEvents,  
                    document.getElementById('searchInput').value,  
                    showImportantOnly  
                );  

                if (filteredEvents.length === 0) return '';  
                
                return `  
                    <div class="date-group ${dateGroup.date === today ? 'today' : ''}" id="date-${dateGroup.date}">  
                        <div class="date-header">  
                            ${dateGroup.date} ${getWeekday(dateGroup.date)}  
                        </div>  
                        ${filteredEvents.map(event => `  
                            <div class="event">  
                                <div class="event-title ${event.timeline.grade <= 5 ? 'important' : ''}">  
                                    ${event.title}  
                                </div>  
                                ${event.content && event.content !== '/' ? `<div class="event-content">${event.content}</div>` : ''}  
                                <div class="event-tags">  
                                    ${event.timeline.theme_list ? event.timeline.theme_list.map(theme => `  
                                        <span class="tag" onclick="window.open('https://www.jiuyangongshe.com/timeline?timeline_theme_id=${theme.timeline_theme_id}&name=${encodeURIComponent(theme.name)}', '_blank')">${theme.name}</span>  
                                    `).join('') : ''}  
                                </div>  
                            </div>  
                        `).join('')}  
                    </div>  
                `;  
            }).join('');  
            
            document.getElementById('timeline').innerHTML = timelineHtml || '<div class="loading">无匹配结果</div>';  
        }  

        function getWeekday(dateStr) {  
            const weekdays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];  
            const date = new Date(dateStr);  
            return weekdays[date.getDay()];  
        }  

        document.getElementById('searchInput').addEventListener('input', (e) => {  
            renderTimeline(currentData);  
        });  

        document.getElementById('filterBtn').addEventListener('click', (e) => {  
            showImportantOnly = !showImportantOnly;  
            e.target.closest('.filter-btn').classList.toggle('active');  
            renderTimeline(currentData);  
        });  

        document.getElementById('todayBtn').addEventListener('click', () => {  
            const today = new Date();  
            const currentYearMonthValue = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, '0')}`;  
            
            if (currentYearMonth !== currentYearMonthValue) {  
                currentYearMonth = currentYearMonthValue;  
                updateMonthDisplay(currentYearMonth);  
                fetchEvents(currentYearMonth);  
            } else {  
                scrollToNearestDate();  
            }  
        });  

        initializeMonthNavigation();  
        fetchEvents(currentYearMonth);  
    </script>  
</body>  
</html>